<template>
  <div class="bookborrowindex">

    <div class="return">
      <el-button @click="returnback"><i class="el-icon-back"></i>返回</el-button>
    </div>
    <div class="inputname">
    <el-input v-model="SbookName" placeholder="请输入关键词" @change="onchange"></el-input>
    </div>
    <br>
    <br>
    <br>
    <transition name="el-fade-in">
      <el-card class="box-card-infermation" v-show="visiable">
        <el-descriptions title="图书信息" :column="1" border>
          <el-descriptions-item label="书名">{{ bookName }}</el-descriptions-item>
          <el-descriptions-item label="类型">{{ bookType }}</el-descriptions-item>
          <el-descriptions-item label="图书编号">{{ bookNo }}</el-descriptions-item>
          <el-descriptions-item label="作者">{{ author }}</el-descriptions-item>
          <el-descriptions-item label="出版社">{{ publisher }}</el-descriptions-item>
          <el-descriptions-item label="出版日期">{{ publishDate }}</el-descriptions-item>
          <el-descriptions-item label="描述信息">{{ description }}</el-descriptions-item>
          <el-descriptions-item label="数量">{{ amount }}</el-descriptions-item>
      </el-descriptions>
      <br>
      <el-button @click="borrowbook">借阅</el-button>
      <el-button @click="cancle">关闭</el-button>
      </el-card>
    </transition>

    <div class="box-card-aside-d">
      
      <span>图书类型</span>
      <br>
      <br>
      <!-- 图书类型最多勾选一个 -->
      <el-checkbox-group v-model="checkList" @change="typeChange" :max="1">
      <el-checkbox v-for="types in typeList" :key="types" :label="types.name"></el-checkbox>
      
      </el-checkbox-group>


    </div>
    
    <el-row>
      <br>
      <el-col :span="9" v-for="data in tabledata" :key="data" >
        <el-card :body-style="{ padding: '0px' }" class="bookcard" shadow="hover" @click.native="book(data.id)">
          <img :src="require('@/assets/normal/' + data.image)" class="image">
          <div style="font-size: 18px;color:aliceblue;padding: 14px; text-align: center ;position: relative;">
            <span>{{ "《" + data.bookName + "》" }}</span>
          </div>
          <div class="tushuleixing">
            <span>{{ data.name }}</span>
          </div>
          <div class="chubanriqi">
            <span>{{ data.publishDate }}</span>
          </div>
        </el-card>
        <br>
      </el-col>
    </el-row>
    <div class="pagination">
    <el-pagination background layout="total,prev,pager,next"
      @current-change="handleCurrentChange"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"></el-pagination>   
    </div>

  </div>
</template>
<script>
import axios from "axios"
import 'element-ui/lib/theme-chalk/base.css';
export default {
  data () {
    return {
      //16
      tabledata:[],
      SbookName:'',
      bookId:'',
      bookName:'',
      bookType:"",
      bookNo:'',
      author:'',
      publisher:'',
      publishDate:'',
      description:'',
      amount:'',
      total:0,
      currentPage:1,
      pageSize:12,
      visiable:false,
      typeList:[],
      checkList:[],
      json:{},
    }
  },
  methods: {
    /* 根据类型查询图书 */
    typeChange(){
      this.$set(this.json,"page",this.currentPage)
      this.$set(this.json,"pageSize",this.pageSize)
      this.$set(this.json,"bookType",this.checkList[0])
      axios.post(this.url + "/book/list",this.json)
      .then((res) => {
        if(res.data.code == 1){
          this.total = parseInt(res.data.data.total)
          this.tabledata = res.data.data.records
        }
      }).catch(() => {
        this.$message.error("加载失败")
      });
    },
    borrowbook(){
      axios.get(this.url + "/borrow/book",{
        params:{
          "borrowId":localStorage.getItem("id"),
          "bookId":this.bookNo
        }
      }).then((res) => {
        if(res.data.code == 1){
          this.$message.success("申请成功")
          this.cancle()
        }else{
          this.$message.error(res.data.msg)
        }
      }).catch(() => {
        this.$message.error("请求失败")
      });
    },
    cancle(){
      this.bookId='',
      this.bookName='',
      this.bookType='',
      this.bookNo='',
      this.author='',
      this.publisher='',
      this.publishDate='',
      this.description='',
      this.amount='',
      this.visiable = false
    },
    book(val){
      this.visiable = true
      axios.get(this.url + "/book/" +val).then((res) => {
        if(res.data.code == 1){
          this.bookId=res.databookId
          this.bookName=res.data.data.bookName,
          this.bookType=res.data.data.bookType,
          this.bookNo=res.data.data.bookNo,
          this.author=res.data.data.author,
          this.publisher=res.data.data.publisher,
          this.publishDate=res.data.data.publishDate,
          this.description=res.data.data.description,
          this.amount=res.data.data.amount
        }else{
          this.$message.error(res.data.msg)
        }
      }).catch(() => {
        this.$message.error("加载失败")
      });
    },
    /* 查询图书 */
    onchange(){
      this.$set(this.json,"bookName",this.SbookName)
      this.$set(this.json,"page",1)
        axios.post(this.url + "/book/list",this.json)
        .then((res) => {
          if(res.data.code == 1){
            this.total = parseInt(res.data.data.total)
            this.tabledata = res.data.data.records
          }
        }).catch(() => {
          this.$message.error("加载失败")
        });
    },
    returnback(){
      this.$router.push("/index")
    },
      handleCurrentChange:function(val){
        this.$set(this.json,"page",val)
        axios.post(this.url + "/book/list",this.json)
        .then((res) => {
          if(res.data.code == 1){
            this.total = parseInt(res.data.data.total)
            this.tabledata = res.data.data.records
          }
        }).catch(() => {
          this.$message.error("加载失败")
        });
      },
  },
  mounted () {
      this.$set(this.json,"page",this.currentPage)
      this.$set(this.json,"pageSize",this.pageSize) 
      axios.post(this.url + "/book/list",this.json)
      .then((res) => {
        if(res.data.code == 1){
          this.total = parseInt(res.data.data.total)
          this.tabledata = res.data.data.records
        }
      }).catch(() => {
        this.$message.error("加载失败")
      });

      /* 查询图书类型 */
      axios.get(this.url + "/book/typelist").then((res) => {
        if(res.data.code == 1){
          this.typeList = res.data.data
        }
      }).catch(() => {
        this.$message.error("加载失败")
      });
  }
}
</script>

<style scoped>
.bookborrowindex{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background-color:aliceblue;
        background-image: url("../assets/image/borrowbook.png");
        overflow-y:scroll;
        overflow-x:hidden;
    }


    .box-card-aside-d{
        position: fixed;
        right: 5%;
        top:9%;
        padding: 15px;
        width: 160px;
        height: 600px;
        background-color: rgba(244, 238, 238, 0.4);
        border-radius: 15px;
        z-index: 999;
        line-height: 30px;
        overflow-y:scroll;
        overflow-x:hidden;
        font-size: 25px;
        color: aliceblue;

    }

    .el-card{
        position: relative;
        left: 50%;
        width: 220px;
        height: 420px;
        background-color: rgba(0, 0, 0, 0.9);
        border-radius: 15px;
    }

    .box-card-infermation{
        position: fixed;
        left: 34%;
        top:15%;
        width: 500px;
        height: 560px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 15px;
        z-index: 999;
        line-height: 20px;
        overflow-y:scroll;
        overflow-x:hidden;
    }

  .tushuleixing{
    position: absolute;
    left:3%;
    font-size: 9px;
    color:beige;
  }

  .chubanriqi{
    position: absolute;
    font-size: 10px;
    color:beige;
    bottom: 2%;
    left: 1%;
  }

  .image {
    width: 220px;
    height: 300px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

  .bookcard{
    cursor: pointer;
/*     font-size: 18px;
    color:chocolate; */
  }
  .pagination{
    position: relative;
    left: 35%;
  }
  .inputname{
    position: fixed;
    left:40%;
    top: 1.5%;
    border-radius: 15px;
    z-index: 999;
  }
  .return{
    position: absolute;
    left:2%;
    top: 1.5%;
    border-radius: 15px;
    z-index: 999;
  }

</style>